<template>
  <div>
    <header>
      <div class="container">
        <div style="background-color: #f5f5f5" class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-3 bg-header position-relative" :class="{ 'pt-5 pl-0 px-0': flag.isMobile }">
          <div class="container-fluid text-white h-100" v-loading="flag.trial">
            <div class="d-lg-flex align-items-center justify-content-between text-center">
              <div class="col pt-4 pb-4 left">
                <h5 class="display-3">
                  <strong>Préstamo Rápido</strong>
                </h5>
                <h5 class="font-weight-light text-left" :class="{ 'mt-5 mb-3': !flag.isMobile }">
                  <div class="clearfix text-black">
                    <span class="float-left"><strong>Préstamo</strong></span>
                    <span class="float-right"
                      ><strong>{{ trialProductInfo.productAmount }}</strong></span
                    >
                  </div>
                </h5>
                <el-slider
                  :class="{ 'is-mobile': flag.isMobile }"
                  v-model="trialProductInfo.productAmount"
                  :min="Number(demoProductInfo.minAmount)"
                  :max="Number(demoProductInfo.maxAmount)"
                  :step="Number(demoProductInfo.amountInterval)"
                  @change="getProductTrial">
                </el-slider>
                <h5 class="font-weight-light mt-1 mb-1 text-left" :class="{ ' mt-3 mb-6': !flag.isMobile }">
                  <div class="clearfix text-gray text-xs">
                    <span class="float-left">{{ Number(demoProductInfo.minAmount) }}€</span>
                    <span class="float-right">{{ Number(demoProductInfo.maxAmount) }}€</span>
                  </div>
                </h5>
                <h5 class="font-weight-light mb-3 text-left" :class="{ 'mt-3': flag.isMobile }">
                  <div class="clearfix text-black">
                    <span class="float-left">Plazo</span>
                    <span class="float-right">{{ trialProductInfo.timeLimit }}</span>
                  </div>
                </h5>
                <el-slider
                  :class="{ 'is-mobile': flag.isMobile }"
                  v-model="trialProductInfo.timeLimit"
                  :min="Number(demoProductInfo.minTimeLimit)"
                  :max="Number(demoProductInfo.maxTimeLimit)"
                  :step="Number(demoProductInfo.timeLimitInterval)"
                  @change="getProductTrial">
                </el-slider>
                <h5 class="font-weight-light mt-1 mb-5 text-left" :class="{ ' mt-3 mb-6': !flag.isMobile }">
                  <div class="clearfix text-gray text-xs">
                    <span class="float-left">{{ Number(demoProductInfo.minTimeLimit) }}días</span>
                    <span class="float-right">{{ Number(demoProductInfo.maxTimeLimit) }}días</span>
                  </div>
                </h5>
              </div>
              <div class="col-md-5" :class="{ 'is-mobile': flag.isMobile }">
                <div
                  style="position: relative; padding: 2.3rem 2.2rem; background: linear-gradient(to bottom, #fa5142, #ff7422); border-radius: 36px"
                  class="text-left"
                  :class="{ 'is-mobile-mx-1': flag.isMobile }">
                  <template v-if="flag.isMobile">
                    <h6 class="mt-3" :class="{ 'mt-5': flag.isMobile }"> Interés diario：{{ resultProductInfo.rate || "--" }} </h6>
                    <h6 class="mt-3"> Tarifa de servicio：{{ resultProductInfo.fee || "--" }} </h6>
                    <h6 class="mt-3"> Monto recibido：{{ resultProductInfo.arrivalAmount || "--" }}€ </h6>
                    <h6 class="mt-3"> Fecha de devolución：{{ resultProductInfo.repaymentDate || "--" }} </h6>
                    <h6 class="mt-3"> Total a devolver：{{ resultProductInfo.repaymentAmount || "--" }}€ </h6>
                  </template>
                  <template v-else>
                    <h5 class="mt-5"> Importe del préstamo：{{ trialProductInfo.productAmount }}€ </h5>
                    <h5 class="mt-4"> Plazo：{{ trialProductInfo.timeLimit }}días </h5>
                    <h5 class="mt-4" :class="{ 'mt-5': flag.isMobile }"> Interés diario：{{ resultProductInfo.rate || "--" }} </h5>
                    <h5 class="mt-4"> Tarifa de servicio：{{ resultProductInfo.fee || "--" }} </h5>
                    <h5 class="mt-4"> Monto recibido：{{ resultProductInfo.arrivalAmount || "--" }}€ </h5>
                    <h5 class="mt-4"> Fecha de devolución：{{ resultProductInfo.repaymentDate || "--" }} </h5>
                    <h5 class="mt-4"> Total a devolver：{{ resultProductInfo.repaymentAmount || "--" }}€ </h5>
                  </template>

                  <div class="text-center" :class="{ 'mt-3': !flag.isMobile }">
                    <button type="button" class="btn btn-white" style="width: 100%; padding: 14px 30px 8px; margin-top: 4rem" :class="{ 'mt-4': flag.isMobile }" @click="jump2page">
                      <img src="@/assets/img/07.png" style="width: 38px; height: 38px; margin-top: -6px" />
                      <h6 style="display: inline-block; font-size: 1.1rem; color: #ff6f28; margin-left: 10px">
                        {{ btn.text }}
                      </h6>
                    </button>
                    <div class="link" @click="flag.desc = true"> Información sobre el préstamo </div>
                  </div>

                  <div class="score" v-if="userInfo">Puntos: {{ score }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </header>
    <main class="container">
      <div v-if="flag.isMobile" style="height: 90px"></div>
      <div v-else style="height: 140px"></div>
      <section class="pt-4 pb-5" v-if="!flag.isMobile">
        <!-- <h4 v-if="flag.isMobile" class="font-weight-light">
          <strong>SOLUCIONES FINANCIERAS CON SOSTENIBILIDAD Y RESPONSABILIDAD</strong>
        </h4> -->
        <h3 class="font-weight-light">
          <strong>SOLUCIONES FINANCIERAS CON SOSTENIBILIDAD Y RESPONSABILIDAD</strong>
        </h3>
        <h5> Nuestro producto permite a los individuos atender sus necesidades de flujo de efectivo a corto plazo a través de un servicio de préstamo en línea completamente automatizado. </h5>
        <div class="card-deck card-pricing text-center" style="margin-top: 3rem" :class="{ 'mt-1': flag.isMobile }">
          <div class="card border-0" style="background-color: transparent" :class="{ 'pb-0 mb-0': flag.isMobile }">
            <img src="@/assets/img/1.webp" class="webp" />
            <div class="card border-0 text-left" style="background-color: transparent; margin: 0" :class="{ 'pb-0 mb-0': flag.isMobile }">
              <h3>Flujos de Trabajo que Funcionan</h3>
              <h5 class="mt-2"> Empleamos inteligencia artificial limitada para permitir a los oficiales de riesgo construir, probar y validar modelos avanzados de puntuación crediticia. </h5>
            </div>
          </div>
          <div class="card border-0" style="background-color: transparent" :class="{ 'pb-0 mb-0': flag.isMobile }">
            <img src="@/assets/img/2.webp" class="webp" />
            <div class="card border-0 text-left" style="background-color: transparent" :class="{ 'pb-0 mb-0': flag.isMobile }">
              <h3>Solución Todo-en-Uno</h3>
              <h5 class="mt-2">
                Nuestras operaciones están impulsadas por una plataforma de software completamente propietaria, lo que nos permite asegurar una plataforma estable que utiliza los últimos protocolos de
                seguridad para proteger tanto a nuestro negocio como a nuestros clientes.
              </h5>
            </div>
          </div>
          <div class="card border-0" style="background-color: transparent" :class="{ 'pb-0 mb-0': flag.isMobile }">
            <img src="@/assets/img/3.webp" class="webp" />
            <div class="card border-0 text-left" style="background-color: transparent" :class="{ 'pb-0 mb-0': flag.isMobile }">
              <h3>Soporte al Cliente Integral</h3>
              <h5 class="mt-2"> Somos una empresa responsable que se preocupa por las personas, el medio ambiente y la sociedad. </h5>
            </div>
          </div>
          <div class="card border-0" style="background-color: transparent" :class="{ 'pb-0 mb-0': flag.isMobile }">
            <img src="@/assets/img/4.webp" class="webp" />
            <div class="card border-0 text-left" style="background-color: transparent" :class="{ 'pb-0 mb-0': flag.isMobile }">
              <h3>Equipo con Experiencia</h3>
              <h5 class="mt-2">
                Nuestro equipo de gestión tiene más de 20 años de experiencia combinada en el sector de Servicios Financieros y Tecnología, lo que nos da una perspectiva única sobre la intersección de
                estas dos industrias.
              </h5>
            </div>
          </div>
        </div>
      </section>
      <section class="pt-4" :class="{ 'pb-5': !flag.isMobile }">
        <h4 v-if="flag.isMobile" class="font-weight-light">
          <strong>Al presentar la solicitud, ten a mano lo siguiente</strong>
        </h4>
        <h3 v-else class="font-weight-light">
          <strong>Al presentar la solicitud, ten a mano lo siguiente</strong>
        </h3>
        <div class="card-deck card-pricing text-center" style="margin-top: 3rem">
          <van-swipe v-if="flag.isMobile" class="my-swipe" :autoplay="99999" indicator-color="#ff7422">
            <van-swipe-item>
              <div class="card border-0" style="background-color: transparent">
                <img src="@/assets/img/5.jpg" class="webp" />
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="card border-0" style="background-color: transparent"> <img src="@/assets/img/6.jpg" class="webp" /></div
            ></van-swipe-item>
            <van-swipe-item
              ><div class="card border-0" style="background-color: transparent"> <img src="@/assets/img/7.jpg" class="webp" /></div
            ></van-swipe-item>
            <van-swipe-item
              ><div class="card border-0" style="background-color: transparent"> <img src="@/assets/img/8.jpg" class="webp" /></div
            ></van-swipe-item>
          </van-swipe>
          <template v-else>
            <div class="card border-0" style="background-color: transparent">
              <img src="@/assets/img/5.jpg" class="webp" />
            </div>
            <div class="card border-0" style="background-color: transparent">
              <img src="@/assets/img/6.jpg" class="webp" />
            </div>
            <div class="card border-0" style="background-color: transparent">
              <img src="@/assets/img/7.jpg" class="webp" />
            </div>
            <div class="card border-0" style="background-color: transparent">
              <img src="@/assets/img/8.jpg" class="webp" />
            </div>
          </template>
        </div>
      </section>
      <section class="pt-4 pb-5">
        <h4 v-if="flag.isMobile" class="font-weight-light">
          <strong> Pedir préstamo online en One Prestamos, niveles de nuestros préstamos de dinero</strong>
        </h4>
        <h3 v-else class="font-weight-light">
          <strong> Pedir préstamo online en One Prestamos, niveles de nuestros préstamos de dinero</strong>
        </h3>

        <div class="card-deck card-pricing text-center" style="margin-top: 3rem; background-color: #fff">
          <van-swipe v-if="flag.isMobile" class="my-swipe" :autoplay="99999" indicator-color="#ff7422">
            <van-swipe-item>
              <div class="card border-0 text-center" style="background-color: transparent">
                <div class="label">Inicio</div>
                <div class="num">10</div>
                <div class="desc">hasta 400 euros</div>
                <div class="desc">de 5 a 62 días</div>
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="card border-0 text-center" style="background-color: transparent">
                <div class="label">Despegue</div>
                <div class="num">20</div>
                <div class="desc">hasta 1.100 euros</div>
                <div class="desc">de 5 a 62 días</div>
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="card border-0 text-center" style="background-color: transparent">
                <div class="label">Ascenso</div>
                <div class="num">30</div>
                <div class="desc">hasta 400 euros</div>
                <div class="desc">de 5 a 62 días</div>
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="card border-0 text-center" style="background-color: transparent">
                <div class="label">Turbo</div>
                <div class="num">40</div>
                <div class="desc">hasta 1.300 euros</div>
                <div class="desc">de 1 a 3 meses</div>
              </div>
            </van-swipe-item>
            <van-swipe-item>
              <div class="card border-0 text-center" style="background-color: transparent">
                <div class="label">Superturbo</div>
                <div class="num">50</div>
                <div class="desc">hasta 1.600 euros</div>
                <div class="desc">de 1 a 4 meses</div>
              </div>
            </van-swipe-item>
          </van-swipe>
          <template v-else>
            <div class="card border-0 text-center" style="background-color: transparent">
              <div class="label">Inicio</div>
              <div class="num">10</div>
              <div class="desc">hasta 400 euros</div>
              <div class="desc">de 5 a 62 días</div>
            </div>
            <div class="line"></div>
            <div class="card border-0 text-center" style="background-color: transparent">
              <div class="label">Despegue</div>
              <div class="num">20</div>
              <div class="desc">hasta 1.100 euros</div>
              <div class="desc">de 5 a 62 días</div>
            </div>
            <div class="line"></div>
            <div class="card border-0 text-center" style="background-color: transparent">
              <div class="label">Ascenso</div>
              <div class="num">30</div>
              <div class="desc">hasta 400 euros</div>
              <div class="desc">de 5 a 62 días</div>
            </div>
            <div class="line"></div>
            <div class="card border-0 text-center" style="background-color: transparent">
              <div class="label">Turbo</div>
              <div class="num">40</div>
              <div class="desc">hasta 1.300 euros</div>
              <div class="desc">de 1 a 3 meses</div>
            </div>
            <div class="line"></div>
            <div class="card border-0 text-center" style="background-color: transparent">
              <div class="label">Superturbo</div>
              <div class="num">50</div>
              <div class="desc">hasta 1.600 euros</div>
              <div class="desc">de 1 a 4 meses</div>
            </div>
          </template>
        </div>
      </section>
      <div class="row justify-content-center mb-5 pb-5">
        <div class="col-md-12">
          <div class="text-center pt-5 mb-5" :class="{ 'mt-5': !flag.isMobile }">
            <h4 v-if="flag.isMobile" class="font-weight-light">
              <strong>El 95% de nuestros clientes aprueban unánimemente nuestros servicios.</strong>
            </h4>
            <h3 v-else class="font-weight-light">
              <strong>El 95% de nuestros clientes aprueban unánimemente nuestros servicios.</strong>
            </h3>
          </div>
          <div class="mt-5">
            <van-swipe v-if="flag.isMobile" class="my-swipe" :autoplay="99999" indicator-color="#ff7422">
              <van-swipe-item>
                <div class="card shadow-sm border-0">
                  <div class="card-body">
                    <h5 class="card-title">Alejandro García</h5>
                    <p class="card-text text-muted"> "¡Estoy muy impresionado con la velocidad y eficiencia de esta aplicación de préstamos!" </p>
                    <div class="star-box clearfix">
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <span style="" class="float-left ml-sm-3"></span>
                    </div>
                  </div>
                </div>
              </van-swipe-item>
              <van-swipe-item>
                <div class="card shadow-sm border-0">
                  <div class="card-body">
                    <h5 class="card-title">Marta Ruiz</h5>
                    <p class="card-text text-muted"> "Sencillo, directo y rápido. Exactamente lo que necesitaba en una aplicación de préstamos." </p>
                    <div class="star-box clearfix">
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <span style="" class="float-left ml-sm-3"></span>
                    </div>
                  </div>
                </div>
              </van-swipe-item>
              <van-swipe-item>
                <div class="card shadow-sm border-0">
                  <div class="card-body">
                    <h5 class="card-title">Carlos Sánchez</h5>
                    <p class="card-text text-muted"> "Altamente eficiente y confiable: ¡esta aplicación de préstamos es un salvavidas!" </p>
                    <div class="star-box clearfix">
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <span style="" class="float-left ml-sm-3"></span>
                    </div>
                  </div>
                </div>
              </van-swipe-item>
              <van-swipe-item>
                <div class="card shadow-sm border-0">
                  <div class="card-body">
                    <h5 class="card-title">Isabel López</h5>
                    <p class="card-text text-muted"> "Solicitar un préstamo nunca ha sido tan libre de estrés. ¡Muy impresionado!" </p>
                    <div class="star-box clearfix">
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <span style="" class="float-left ml-sm-3"></span>
                    </div>
                  </div>
                </div>
              </van-swipe-item>
              <van-swipe-item>
                <div class="card shadow-sm border-0">
                  <div class="card-body">
                    <h5 class="card-title">Juan Fernández</h5>
                    <p class="card-text text-muted"> "¡Dinero en efectivo fácil y rápido siempre que lo necesite, gracias a esta aplicación de préstamos!" </p>
                    <div class="star-box clearfix">
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <span style="" class="float-left ml-sm-3"></span>
                    </div>
                  </div>
                </div>
              </van-swipe-item>
              <van-swipe-item>
                <div class="card shadow-sm border-0">
                  <div class="card-body">
                    <h5 class="card-title">Lucia Pérez</h5>
                    <p class="card-text text-muted"> "No más esperas en las filas: ¡esta aplicación de préstamos le permitirá ahorrar tiempo!" </p>
                    <div class="star-box clearfix">
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <span style="" class="float-left ml-sm-3"></span>
                    </div>
                  </div>
                </div>
              </van-swipe-item>
              <van-swipe-item>
                <div class="card shadow-sm border-0">
                  <div class="card-body">
                    <h5 class="card-title">José Martínez</h5>
                    <p class="card-text text-muted"> "Necesitaba efectivo con urgencia, lo obtuve en cuestión de horas con esta aplicación de préstamos." </p>
                    <div class="star-box clearfix">
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <span style="" class="float-left ml-sm-3"></span>
                    </div>
                  </div>
                </div>
              </van-swipe-item>
              <van-swipe-item>
                <div class="card shadow-sm border-0">
                  <div class="card-body">
                    <h5 class="card-title">Sofia González</h5>
                    <p class="card-text text-muted"> "Rápido, confiable y conveniente. ¡Esta aplicación de préstamos cumple todos los requisitos!" </p>
                    <div class="star-box clearfix">
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <span style="" class="float-left ml-sm-3"></span>
                    </div>
                  </div>
                </div>
              </van-swipe-item>
              <van-swipe-item>
                <div class="card shadow-sm border-0">
                  <div class="card-body">
                    <h5 class="card-title">David Rodríguez</h5>
                    <p class="card-text text-muted"> "Mi solución preferida para préstamos rápidos: esta aplicación nunca decepciona" </p>
                    <div class="star-box clearfix">
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <span style="" class="float-left ml-sm-3"></span>
                    </div>
                  </div>
                </div>
              </van-swipe-item>
              <van-swipe-item>
                <div class="card shadow-sm border-0">
                  <div class="card-body">
                    <h5 class="card-title">Ana Hernández</h5>
                    <p class="card-text text-muted"> "Recomiendo encarecidamente esta aplicación de préstamos por su servicio rápido y confiable." </p>
                    <div class="star-box clearfix">
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                      <span style="" class="float-left ml-sm-3"></span>
                    </div>
                  </div>
                </div>
              </van-swipe-item>
            </van-swipe>
            <el-carousel v-else height="250px" :autoplay="false" indicator-position="none" arrow="nerver">
              <el-carousel-item>
                <div class="row">
                  <div class="col-md-4">
                    <div class="card shadow-sm border-0">
                      <div class="card-body">
                        <h5 class="card-title">Alejandro García</h5>
                        <p class="card-text text-muted"> "¡Estoy muy impresionado con la velocidad y eficiencia de esta aplicación de préstamos!" </p>
                        <div class="star-box clearfix">
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <span style="" class="float-left ml-sm-3"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="card shadow-sm border-0">
                      <div class="card-body">
                        <h5 class="card-title">Marta Ruiz</h5>
                        <p class="card-text text-muted"> "Sencillo, directo y rápido. Exactamente lo que necesitaba en una aplicación de préstamos." </p>
                        <div class="star-box clearfix">
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <span style="" class="float-left ml-sm-3"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="card shadow-sm border-0">
                      <div class="card-body">
                        <h5 class="card-title">Carlos Sánchez</h5>
                        <p class="card-text text-muted"> "Altamente eficiente y confiable: ¡esta aplicación de préstamos es un salvavidas!" </p>
                        <div class="star-box clearfix">
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <span style="" class="float-left ml-sm-3"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="row">
                  <div class="col-md-4">
                    <div class="card shadow-sm border-0">
                      <div class="card-body">
                        <h5 class="card-title">Isabel López</h5>
                        <p class="card-text text-muted"> "Solicitar un préstamo nunca ha sido tan libre de estrés. ¡Muy impresionado!" </p>
                        <div class="star-box clearfix">
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <span style="" class="float-left ml-sm-3"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="card shadow-sm border-0">
                      <div class="card-body">
                        <h5 class="card-title">Juan Fernández</h5>
                        <p class="card-text text-muted"> "¡Dinero en efectivo fácil y rápido siempre que lo necesite, gracias a esta aplicación de préstamos!" </p>
                        <div class="star-box clearfix">
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <span style="" class="float-left ml-sm-3"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="card shadow-sm border-0">
                      <div class="card-body">
                        <h5 class="card-title">Lucia Pérez</h5>
                        <p class="card-text text-muted"> "No más esperas en las filas: ¡esta aplicación de préstamos le permitirá ahorrar tiempo!" </p>
                        <div class="star-box clearfix">
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <span style="" class="float-left ml-sm-3"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
              <el-carousel-item>
                <div class="row">
                  <div class="col-md-4">
                    <div class="card shadow-sm border-0">
                      <div class="card-body">
                        <h5 class="card-title">José Martínez</h5>
                        <p class="card-text text-muted"> "Necesitaba efectivo con urgencia, lo obtuve en cuestión de horas con esta aplicación de préstamos." </p>
                        <div class="star-box clearfix">
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <span style="" class="float-left ml-sm-3"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="card shadow-sm border-0">
                      <div class="card-body">
                        <h5 class="card-title">Sofia González</h5>
                        <p class="card-text text-muted"> "Rápido, confiable y conveniente. ¡Esta aplicación de préstamos cumple todos los requisitos!" </p>
                        <div class="star-box clearfix">
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <span style="" class="float-left ml-sm-3"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-md-4">
                    <div class="card shadow-sm border-0">
                      <div class="card-body">
                        <h5 class="card-title">David Rodríguez</h5>
                        <p class="card-text text-muted"> "Mi solución preferida para préstamos rápidos: esta aplicación nunca decepciona" </p>
                        <div class="star-box clearfix">
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <img style="width: 16px; height: 16px" src="@/assets/img/star.png" class="float-left" />
                          <span style="" class="float-left ml-sm-3"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </main>

    <m-dialog-full :visible.sync="flag.desc" title="Información sobre el préstamo" :show-confirm-button="false" @close="handleDescClose">
      <DialogText/>
    </m-dialog-full>
  </div>
</template>

<script>
import DialogText from './DialogText';

export default {
  components: {
    DialogText
  },
  data() {
    return {
      flag: {
        init: true,
        trial: false,
        desc: false,
        isMobile: false,
      },
      userInfo: null,
      score: {},

      btn: {
        text: "立即申请",
      },

      demoProductInfo: {
        productId: "",
        minAmount: "0",
        maxAmount: "0",
        amountInterval: "0",
        minTimeLimit: "0",
        maxTimeLimit: "0",
        timeLimitInterval: "0",
      },
      trialProductInfo: {
        productId: "",
        productAmount: 0,
        timeLimit: 0,
      },
      resultProductInfo: {
        amount: "",

        rate: "",
        fee: "",
        arrivalAmount: "",
        repaymentAmount: "",
        repaymentDate: "",
      },
      orderApplyInfo: {
        productId: "",
        loanAmount: "",
        term: "",
        // bankCardBindId: "", // 可不传，默认取登录用户绑定银行卡
        longitude: "-360",
        latitude: "-360",
        check: {
          checkType: 1, // 0不校验 1身份证号
          checkContent: "", // 身份证后4位
        },
      },

      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      },
    };
  },
  created() {
    this.init();
    const defaultInnerWidth = window.innerWidth;
    if (defaultInnerWidth < 992) {
      this.flag.isMobile = true;
    }
    var that = this;
    window.onresize = function () {
      const resizeInnerWidth = window.innerWidth;
      if (resizeInnerWidth < 992) {
        that.flag.isMobile = true;
      } else {
        that.flag.isMobile = false;
      }
    };
  },
  methods: {
    init() {
      this.getAppConfig();
      this.handleUserRelative();
      const userInfo = this.$state["USER_INFO"];
      if (userInfo) this.score = userInfo.score;
    },
    getAppConfig() {
      this.$http.post(this.$api.getAppConfig).then((res) => {
        if (res.resultCode == 200) {
          this.$state["CONFIG_INFO"] = res.data;
          this.getProductInfo();
        }
      });
    },
    getProductInfo() {
      this.flag.init = true;
      this.$http
        .post(this.$api.getProductInfo)
        .then((res) => {
          if (res.resultCode == 200) {
            const temp = res.data;
            this.$state["PRODUCT_INFO"] = temp;
            this.demoProductInfo = temp.products[0];
            const { maxAmount, maxTimeLimit, productId } = this.demoProductInfo;
            this.trialProductInfo = {
              productId,
              productAmount: Number(maxAmount),
              timeLimit: Number(maxTimeLimit),
            };
            this.getProductTrial(true);
          }
          this.flag.init = false;
        })
        .catch(() => {
          this.flag.init = false;
        });
    },
    getProductTrial(isAuto) {
      if (isAuto === true) {
      } else {
        if (this.flag.init) return;
      }
      const { productId, productAmount, timeLimit } = this.trialProductInfo;
      this.flag.trial = true;
      this.$http
        .post(this.$api.getProductTrial, {
          productId,
          productAmount: String(productAmount),
          timeLimit: String(timeLimit),
        })
        .then((res) => {
          if (res.resultCode == 200) {
            this.resultProductInfo = res.data;
          }
          this.flag.trial = false;
        })
        .catch(() => {
          this.flag.trial = false;
        });
    },
    handleUserRelative() {
      if (this.$state["REFRESH_SIGN"]) {
        this.$state["REFRESH_SIGN"] = null;
        window.location.reload();
      }
      const userInfo = this.$state["USER_INFO"];
      this.userInfo = userInfo;
      if (!userInfo) {
        this.btn.text = "Solicitar";
      } else {
        const { userStatus } = userInfo;
        switch (userStatus) {
          case 10:
            this.btn.text = "Solicitar";
            break;
          case 20:
            // 待申请，调接口提示 申请成功，待审核
            this.btn.text = "Solicitar ahora";
            break;
          case 30:
            this.hanleOrderReady();
            break;
          case 41:
            // 修改银行卡，待定跳转第三方
            this.btn.text = "Cambiar tarjera bancaria";
            break;
          case 50:
            this.btn.text = "Rechazado";
            break;
          case 70:
            this.btn.text = "Está desembolsando";
            break;
          case 80:
          case 81:
            this.btn.text = "Reembolso";
            break;
          case 90:
            this.btn.text = "Solicitar";
            break;
          case 51:
            this.btn.text = "Solicitar ahora";
            break;
        }
      }
    },
    handleDescClose() {
      this.flag.desc = false;
    },
    jump2page() {
      const userInfo = this.$state["USER_INFO"];
      if (!userInfo) {
        this.$router.push({
          name: "Login",
        });
      } else {
        const { userStatus } = userInfo;
        switch (userStatus) {
          case 10:
            this.$router.push({
              name: "Kyc",
            });
            break;
          case 20:
            // 待申请，调接口提示 申请成功，待审核
            this.$alert("Una vez confirmado, recibirás el préstamo en unos minutos", "", {
              top: "20vh",
              confirmButtonText: "confirmar",
              callback: (action) => {
                if (action == "confirm") {
                  const { productId, productAmount, timeLimit } = JSON.parse(JSON.stringify(this.trialProductInfo));
                  Object.assign(this.orderApplyInfo, {
                    productId,
                    loanAmount: String(productAmount),
                    term: String(timeLimit),
                  });
                  this.$http.post(this.$api.orderApply, this.orderApplyInfo).then((res) => {
                    if (res.resultCode == 200) {
                      if (this.flag.isMobile) {
                        this.$toast.success("Solicitud exitosa, por favor espere pacientemente la revisión");
                      } else {
                        this.$notify({
                          title: "Consejos",
                          message: "Solicitud exitosa, por favor espere pacientemente la revisión",
                          type: "success",
                        });
                      }
                      this.hanleOrderReady();
                    }
                  });
                }
              },
              customClass: this.flag.isMobile ? "is-mobile" : "",
            });
            break;
          case 41:
            // 修改银行卡，待定跳转第三方
            break;
          case 50:
          case 70:
          case 80:
          case 81:
          case 99:
            this.$router.push({
              name: "OrderIndex",
            });
            break;
          case 51:
            // 7天后重试
            this.$alert("Los requisitos de la solicitud no se cumplen temporalmente. Vuelva a intentarlo en 7 días.", "", {
              confirmButtonText: "confirmar",
              callback: (action) => {},
              customClass: this.flag.isMobile ? "is-mobile" : "",
            });
            break;
        }
      }
    },
    hanleOrderReady() {
      this.$http.post(this.$api.getCurrentOrderId).then((res) => {
        if (res.resultCode == 200) {
          const orderId = res.data.data.orderDetail.orderId;
          this.$http.post(this.$api.orderReady, { orderId }).then((res) => {
            if (res.resultCode == 200) {
              const userInfo = this.$state["USER_INFO"];
              const { appUserType } = userInfo;
              if (appUserType == 1) {
                // this.$adjust.trackEvent({
                //   eventToken: "y1q8vh",
                // });
                this.$trackPixel('FirstApply')
              }
              window.location.reload();
            }
          });
        }
      });
    },
  },
};
</script>

<style>
.el-message-box__content p {
  font-size: 20px !important;
  /* font-weight: 600 !important; */
  color: #333 !important;
  padding: 30px 20px;
}
.el-message-box__btns {
  text-align: center;
}
.el-message-box__btns .el-button {
  font-size: 18px;
  background-color: #fb7566;
  border-color: #fb7566 !important;
  outline: none !important;
}
.el-message-box__headerbtn {
  border-color: #fb7566 !important;
  outline: none !important;
}
.el-message-box__headerbtn .el-message-box__close:hover {
  color: #fb7566 !important;
}
.el-slider__runway {
  height: 16px;
}
.el-slider__bar {
  height: 16px;
  background-color: #fb7566;
}
.el-slider__button-wrapper {
  top: -10px;
}
.el-slider__button {
  width: 24px;
  height: 24px;
  border-color: #fb7566;
}
</style>
<style lang="scss" scoped>
::v-deep {
  .el-message-box__content {
    p {
      font-size: 20px !important;
      font-weight: 600 !important;
      color: #333 !important;
    }
  }
}
.link {
  padding-top: 8px;
  cursor: pointer;
  text-decoration: underline;
}
.content {
  margin-top: 80px;
}
.score {
  position: absolute;
  top: 28px;
  right: 0;
  height: 50px;
  line-height: 50px;
  background-color: #fb7566;
  color: #fff;
  padding-left: 30px;
  padding-right: 12px;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}
.webp {
  border-radius: 4px;
  border: 2px solid #333;
}
.my-swipe {
  .webp {
    border: none;
    transform: scale(0.5);
    transform: scale(0.5);
    margin-top: -44%;
    margin-bottom: -32%;
    // margin: -3rem 5.2rem -1.2rem;
  }
}
.card {
  padding: 23px 0;
  // border-right: 1px solid #e9e9e9 !important;
  &:last-of-type {
    border-right: none;
  }
  .label {
    font-size: 20px;
    font-weight: 600;
    // color: #fb7566;
  }
  .num {
    font-size: 38px;
    font-weight: 600;
    color: #fb7566;
    margin: 20px 0;
  }
  .desc {
  }
}
.triangle {
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 35px solid #fff; /* 三角形颜色与圆形背景色一致 */
  position: absolute;
  bottom: -35px;
  right: 10%;
  transform: translateX(-50%);
}
.line {
  width: 1px;
  background-color: #e9e9e9;
  height: 253px;
}
.card-text {
  height: 70px;
}
.col-md-5 {
  margin-left: 60px;
  &.is-mobile {
    margin-left: 0;
    margin-top: -50px;
    margin-bottom: -80px;
    padding: 0;
    .text-left {
      padding: 2rem 1.7rem !important;
    }
  }
}
::v-deep {
  .is-mobile {
    .el-slider__bar {
      height: 11px;
    }
    .el-slider__runway {
      margin: 0;
      height: 10px;
    }
    .el-slider__button-wrapper {
      top: -13px;
    }
    .el-slider__button {
      height: 18px;
      width: 18px;
    }
  }
}
.is-mobile-mx-1 {
  margin: 0 1rem;
}
</style>

<style>
.is-mobile.el-message-box {
  width: 80%;
}
.van-toast--success {
  width: 80%;
}
</style>
